<!-- 引入头部样式 -->
{include file="common/meta"}

<link rel="stylesheet" href="/assets/home/css/profile.css" />
<link rel="stylesheet" href="/assets/home/plugin/citypicker/css/city-picker.css" />
<script src="/assets/home/plugin/citypicker/js/city-picker.data.min.js"></script>
<script src="/assets/home/plugin/citypicker/js/city-picker.min.js"></script>



<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">基本资料</h1>
</header>

<div class="user">
    <div class="avatar wow fadeInUp">
        <!-- 头像那里不为空，并且是一张图片时，输出 -->
        {if condition="$AutoLogin['avatar'] && is_file('.'.$AutoLogin['avatar'])"}
        <img src="{$AutoLogin.avatar}" />
        <!-- 如果没有图片 -->
        {else /}
        <img src="/assets/home/images/avatar.jpg" />
        {/if}
    </div>
</div>

<!-- enctype="multipart/form-data",设置文件类型 指定表单数据的编码类型为多部分表单数据，
    这意味着表单数据将被编码为多个部分，每个部分包含一个表单字段和它的值。这种方式适用于
    上传文件或包含二进制数据的表单，因为它可以处理非文本数据。-->
<form class="mui-input-group" method="post" enctype="multipart/form-data">
    <div class="mui-input-row">
        <label>昵称：</label>
        <!-- 公共控制器Home.php的最后一行，如下，有赋值过来 
         $this->view->assign('AutoLogin',$AutoLogin);
         return $AutoLogin;
         这里 value="{$AutoLogin.nickname}"获取到值-->
        <input type="text" name="nickname" value="{$AutoLogin.nickname}" class="mui-input-clear" placeholder="请输入昵称"
            required />
    </div>
    <div class="mui-input-row">
        <label>手机号码：</label>
        <input type="text" name="mobile" value="{$AutoLogin.mobile}" class="mui-input-clear" placeholder="请输入手机号码"
            required />
    </div>
    <div class="mui-input-row">
        <label>邮箱：</label>
        <input type="email" name="email" value="{$AutoLogin.email}" class="mui-input-clear" placeholder="请输入邮箱"
            required />
    </div>
    <div class="mui-input-row">
        <label>密码：</label>
        <input type="password" name="password" class="mui-input-password" placeholder="请输入密码">
    </div>
    <div class="mui-input-row">
        <label>性别：</label>
        <select class="mui-btn mui-btn-block" name="gender">
            <!-- 三元运算符 -->
            <option {$AutoLogin['gender']=="0" ? "selected" :''} value="0">保密</option>
            <option {$AutoLogin['gender']=="1" ? "selected" :''} value="1">男</option>
            <option {$AutoLogin['gender']=="2" ? "selected" :''} value="2">女</option>
        </select>
    </div>
    <div class="mui-input-row region">
        <label>地区：</label>
        <div class="citypicker">
            <input id="city" type="text" data-toggle="city-picker" name="region" readonly />
        </div>
    </div>

    <!-- 头像的上传 -->
    <input type="file" class="form-control" id="avatar" name="avatar" style="display: none;" />

    <div class="mui-button-row">
        <button type="submit" class="mui-btn mui-btn-primary">确认</button>
    </div>
</form>



<script>
    // 获取登录信息的省市区
    let province = "{$AutoLogin.province ? $AutoLogin.province : ''}";
    let city = "{$AutoLogin.city ? $AutoLogin.city : ''}";
    let district = "{$AutoLogin.district ? $AutoLogin.district : ''}";

    console.log(province, city, district);


    // 赋默认值
    let code = parseInt(district) || parseInt(city) || parseInt(province);
    $('#city').val(code);

    $('#city').citypicker();

    // 更改地区码的值
    // 给city元素做一个事件绑定，目的是获取地区码
    $('#city').on("cp:updated", function () {
        var citypicker = $(this).data('citypicker')
        // 地区拿不到就拿市，市拿不到就拿省
        var region = citypicker.getCode("district") || citypicker.getCode("city") || citypicker.getCode("province")

        $("input[name=region]").val(region)

        // exit;

    })



    //选择头像
    $('.avatar').click(function () {
        $('#avatar').click()
    })

    //给Input元素绑定一个改变的事件
    $('#avatar').change(function () {
        //将拿到的图片，转换为本地的图片结构，进行显示
        // console.log($(this)[0].files[0])

        //选择的图片
        var file = $(this)[0].files[0]

        //创建一个文件读取器对象
        var reader = new FileReader()

        //让这个对象去读取上面的文件
        reader.readAsDataURL(file)

        //绑定一个事件，读取成功后拿到结果的事件
        reader.onload = function (ev) {
            //把base64的数据 渲染上去
            $(".avatar img").attr('src', ev.target.result)
        }
    })
</script>